<template lang="html">
  <div id="order">
    <app-table :total="total" @fetchData="fetchData">
      <el-col :span="4">
        <el-input placeholder="序号/订单编号/收货人" v-model="filter.text"></el-input>
      </el-col>
      <el-select placeholder="订单状态" v-model="filter.status" clearable>
        <el-option label="已发货" value="0"></el-option>
        <el-option label="未发货" value="1"></el-option>
      </el-select>
      <div slot="table">
        <el-table :data="tableData" stripe border style="width: 100%" class="orderTable">
          <el-table-column prop="id" label="序号" width="100" sortable></el-table-column>
          <el-table-column prop="ordernumber" label="订单编号" width="130"></el-table-column>
          <el-table-column prop="ordername" label="收货人" width="90"></el-table-column>
          <el-table-column prop="phone" label="电话" width="150"></el-table-column>
          <el-table-column prop="address" label="收获地址"></el-table-column>
          <el-table-column prop="money" label="总金额" width="150"></el-table-column>
          <el-table-column prop="status" label="订单状态" width="120">
            <template scope="scope">
              <el-tag :type="scope.row.status === '1' ? 'success':'warning'" close-transition>
                {{scope.row.status === '1'? '已发货': '未发货'}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140" fixed="right">
            <template scope="scope">
              <el-button size="small" type="info" @click="editButton(scope.$index, scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </app-table>
    <el-dialog v-model="visible" size="tiny" title="订单编辑">
      <el-form :model="form" ref="form" :rules="rules" label-width="100px">
        <el-form-item label="收货人:" :label-width="formLabelWidth" prop="ordername">
          <el-input v-model="form.ordername"></el-input>
        </el-form-item>
        <el-form-item label="电话:" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="收获地址:" :label-width="formLabelWidth" prop="email">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="总金额:" :label-width="formLabelWidth" prop="money">
          <el-input-number :min="0" v-model="form.money"></el-input-number>
        </el-form-item>
        <el-form-item label="状态:" :label-width="formLabelWidth">
          <el-radio class="status" v-model="form.status" label="1">已发货</el-radio>
          <el-radio class="status" v-model="form.status" label="0">未发货</el-radio>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-button type="primary" @click="confirmBtn()">确定</el-button>
          <el-button type="primary" @click="cancleBtn()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import * as order from '../../../api/order.js';
import AppTable from '../../common/app-table.vue';
import Config from '../../../config.js';
import {
  get_filter_params,
  reset_filter_params,
  form_init,
  copy
} from '../../../helpers.js'
export default {
  components: {
    AppTable
  },
  data() {
    return {
      formLabelWidth: '100px',
      visible: false,
      total: 0,
      tableData: [],
      row: null,
      index: null,
      info: null,
      isEdit: false,
      filter: {
        text: '',
        status: null,
      },
      form: {
        ordername: '',
        phone: null,
        address: '',
        money: '',
        status: '1'
      },
      rules: {

      }
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    submit(info) {
      if (this.isEdit) {
        form_init(info, this.tableData[this.index])
      } else {
        this.tableData.unshfit(info);
      }
    },
    fetchData(page = Config.page, bFilterReset = false) {
      if (bFilterReset)
        reset_filter_params(this.filter);
      let params = {
        page: page,
        filter: get_filter_params(this.filter)
      };
      order.getTableData(params).then(data => {
        this.total = data.total;
        this.tableData = data.data;
      });
    },
    // 编辑
    editButton(index, row) {
      this.index = index+1;
      this.visible = true;
      this.info = row;
      form_init(row,this.form);
    },
    // 确定
    confirmBtn() {
      this.visible = false;
      order.update(this.index,this.form).then(data=>{
        this.$message.success('编辑成功');
      })
      copy(this.form,this.info);
    },
    // 取消
    cancleBtn() {
      this.visible = false;
      this.$message.info('操作取消')
    }
  }
};
</script>
<style lang="less">
#order {
  margin-top: 20px;
  th {
    text-align: center;
  }
  td {
    text-align: center;
  }
}

.orderTable {
  margin-top: 20px;
}
</style>
